<template>
  <div>
    <div class="table-header-content">
      <div style="flex-wrap: wrap;">
        <div class="margin-r-20px margin-t-10px flex-jc-start flex-wrap">
          <slot name="customSearch"></slot>
          <div v-for="item, index in operationItem.SearchItem" class="margin-r-10px margin-b-10px">
            <el-input v-if="item.type == 'input' && !item.closeSearch" v-model="pageInfo.request[item.code]"
                      :placeholder="item.name" clearable/>
            <el-select v-if="item.type === 'select' && !item.closeSearch" v-model="pageInfo.request[item.code]"
                       :clearable="!item.closeClearable" :placeholder="item.name" filterable>
              <el-option v-for="option in item.options" :label="option[item.label] || option.label"
                         :value="option[item.value] || option.value">
              </el-option>
            </el-select>
            <!-- :size="‘default"  -->
            <el-date-picker
                v-if="(item.type === 'daterange' || item.type === 'date' || item.type === 'year') && !item.closeSearch"
                v-model="pageInfo.request[item.code]" :end-placeholder="item.endName || '结束时间'" :placeholder="item.placeholder || '请选择日期'"
                :range-separator="item.rangeName || '至'" :start-placeholder="item.startName || '开始时间'"
                :type="item.type" :value-format="item.valueFormat || 'YYYY-MM-DD'"
                @change="handleDateRange($event, item.code)"/>
            <el-cascader v-if="item.type === 'cascader'" v-model="pageInfo.request[item.code]"
                         :clearable="!item.closeClearable" :options="item.options" :placeholder="item.name"
                         :props="item.props" filterable @change="item.change">
            </el-cascader>
            <el-checkbox v-if="item.type == 'checkbox' && !item.closeSearch" v-model="pageInfo.request[item.code]"
                         :false-label="item.uncheckedValue" :label="item.label" :true-label="item.checkedValue"
                         size="large">
            </el-checkbox>
          </div>
        </div>
        <div class="flex margin-t-10px flex-jc-end">
          <el-button v-if="operationItem.defaultSearch" :icon="Search" type="primary" @click="pageInfo.paging">{{
              operationItem.SearchText || '搜索'
            }}
          </el-button>
          <el-button v-if="operationItem.defaultRefresh" :icon="Refresh" @click="pagingRefresh">{{
              operationItem.RefreshText || '重置'
            }}
          </el-button>
          <div v-for="btItem in props.operationItem.menuArray" class="margin-l-10px">
            <el-button v-if="btItem.show" v-hasPermi="btItem.hasPermi || []" :disabled="btItem.disabled"
                       :icon="btItem.icon" :size="btItem.size || ''" :type="btItem.type || ''"
                       @click="btItem.handle(btItem.customParameters)">{{
                btItem.text || "请添加按钮签名"
              }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div style="padding: 0px 20px 10px 20px;" v-if="operationItem.customTableHeader">
      <slot name="customTableHeader"></slot>
    </div>
  </div>
</template>

<script setup>
import {Refresh, Search} from '@element-plus/icons-vue'
import {onMounted, useSlots, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {useRoute} from 'vue-router'

const route = useRoute()
const slots = useSlots()
const props = defineProps({
    pageInfo: {
        default: function () {
            return {
                paging: function () {
                    ElMessage.warning('请传入设置函数paging')
                },
            }
        }
    },
    operationItem: {
        default: function () { return {} }
    },

})
watch(() => { return route.path }, () => {
    props.pageInfo.request = requestSave;
}, {})
let requestSave = {}
const pagingRefresh = () => {
  let pageInfo = props.pageInfo
  let request = pageInfo.request
  Object.keys(request).forEach((key)=>{
    if (key != 'pageDomain') {
      pageInfo.request[key] = ''
    }
  })
  request.pageDomain.pageNum = 1
  pageInfo.paging()
}
function handleDateRange(dateArr, code) {
    if (typeof code == 'string' || !code) { return }

    if (dateArr && dateArr.length > 0) {
        props.pageInfo.request[code[0] || 'createDateStart'] = dateArr[0]
        props.pageInfo.request[code[1] || 'createDateEnd'] = dateArr[1]
    } else {
        props.pageInfo.request[code[0] || 'createDateStart'] = null
        props.pageInfo.request[code[1] || 'createDateEnd'] = null
    }

}

onMounted(() => {
    props.operationItem.SearchItem.map((item) => {
        item.valueInit ? props.pageInfo.request[item.code] = item.valueInit : ''
    })
    requestSave = JSON.parse(JSON.stringify(props.pageInfo.request))
})
</script>

<style lang="scss" scoped>
.table-header-content {
    //top留10px 给flex换行
    padding: 10px 20px 20px 20px;
}
</style>
